<template>
  <div class="tickling">
    <div class="tickling_main">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>反馈及评论</span>
        </div>
        <div v-if="ticklingList.length > 0">
          <div
            v-for="(item, index) in ticklingList"
            :key="index"
            class="tickling_main"
          >
            <div>
              <div class="dispaly">
                <div>
                  <el-image
                    style="width: 110px; height: 110px"
                    :src="item.goods_img"
                    fit="cover"
                  ></el-image>
                </div>
                <div style="height: 70px;line-height: 30px;">
                  <div style="font-size:14px;">
                    <span style="color:blue;margin-right:8px">{{
                      item.goods_name
                    }}</span
                    >用户反馈
                  </div>
                  <div class="desc">
                    {{ item.desc }}
                  </div>
                </div>
                <div style="height:110px;margin-left:15px">
                  <el-image
                    v-for="(img, index) in item.err_img"
                    :key="index"
                    style="width: 110px; height: 110px;"
                    :src="img"
                    :preview-src-list="item.err_img"
                  >
                  </el-image>
                </div>
              </div>
              <div class="dispaly">
                <div style="margin-right:10px">{{ item.create_at }}</div>
                <el-button type="text" @click="godetails(item.goods_id)"
                  >查看</el-button
                >
                <el-button type="text" @click="goupgoods(item.tb_goods_id)"
                  >管理</el-button
                >
              </div>
            </div>
            <el-divider style="margin: 5px 0;"></el-divider>
          </div>
        </div>
        <div v-else style="width:100%;text-align:center">
          暂时没有反馈!
        </div>
        <div style="width:100%;text-align:right">
          <!-- 分页器 -->
          <!-- @size-change="handleSizeChange" -->
          <!-- background -->
          <el-pagination
            @current-change="handleCurrentChange2"
            :current-page="currentPage"
            :page-size="pagesize"
            :pager-count="11"
            layout="total, prev, pager, next, jumper"
            :total="count"
          >
            <!-- :page-sizes="[100, 200, 300, 400]" -->
          </el-pagination>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getErrorList } from "@/api/user/user";
export default {
  name: "tickling",
  data() {
    return {
      pagesize: 15,
      currentPage: 1,
      count: 0,
      // imgList: [],
      ticklingList: [
        // {
        //   id: 1, // 纠错表id
        //   goods_id: 13, //商品表自增id
        //   type: 1,
        //   desc: "测试", //纠错描述
        //   err_img: "", //纠错图片
        //   create_at: "2020-06-03 11:22:28", //纠错时间
        //   update_at: "2020-06-03 11:22:28",
        //   goods_img:
        //     "http://img.alicdn.com/imgextra/i3/1796224201/O1CN01U0ob191gu6RxulRhd_!!1796224201.png", // 商品图片
        //   tb_goods_id: "578682532714", //淘宝id
        //   goods_short_title: "" //商品短标题
        // }
      ]
    };
  },

  computed: {},
  created() {
    // this.getErrorList();
  },
  mounted() {},
  methods: {
    goupgoods(id) {
      let routes = this.$router.resolve({
        path: "/userinfo/upgoods",
        query: { id: id }
      });
      window.open(routes.href, "_blank");
    },
    godetails(id) {
      let routes = this.$router.resolve({
        path: "/optimGoods/goodsDetails",
        query: { id: id }
      });
      window.open(routes.href, "_blank");
    },
    // 分页
    handleCurrentChange2(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.getErrorList(this.currentPage, 15);
    },
    //纠错列表
    getErrorList(page, pagesize) {
      getErrorList({
        page: page,
        pagesize: pagesize
      })
        .then(res => {
          if (res.code == 200) {
            console.log("纠错列表", res);
            this.count = res.data.count;
            this.ticklingList = res.data.data;
            for (var i = 0; i < this.ticklingList.length; i++) {
              const imgarr = this.ticklingList[i].err_img.split(",");
              // console.log(imgarr);
              this.ticklingList[i].err_img = [];
              imgarr.forEach(e => {
                e = "http://" + e;
                // console.log(e);
                this.ticklingList[i].err_img.push(e);
              });
              // this.ticklingList[i].err_img = imgarr;
            }
            // console.log(this.ticklingList);
          } else {
            this.$message.info(res.msg);
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>

<style lang="less" scoped>
.tickling {
  .tickling_main {
    text-align: left;
    .dispaly {
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }
    .tickling_main::v-deep {
      .el-divider {
        margin: 5px 0;
      }
      .desc {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        max-width: 520px;
      }
    }
  }
}
</style>
